<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>东坡数字资源</title>
    <base href="/">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="manage/js/moment/min/moment-with-locales.min.js"></script>
    <style>
        html, body, ul, ul li {
            margin: 0;
            padding: 0;
        }

        .main {
            background-image: url("image/backgournd.png");
            width: 1920px;
            height: 1080px;
        }

        .video, .video video {
            width: 1024px;
            height: 576px;
        }

        .video {
            position: absolute;
            top: 252px;
            left: 846px;
        }

        .left-bar div {
            float: left;
        }

        .left-bar {
            position: absolute;
            left: 45px;
            top: 390px;
        }

        .left-bar .mybtn-left {
            margin-top: 104px;
            width: 54px;
            height: 90px;
            background-image: url("image/left.png");
        }

        .left-bar .mybtn-right {
            margin-top: 104px;
            width: 55px;
            height: 91px;
            background-image: url("image/right.png");
        }

        .btns {
            width: 620px;
            height: 298px;
            overflow: hidden;

        }

        .btns table tr td:first-child div {
            margin-left: 0;
        }

        .btns table tr td div {
            margin-left: 17px;
            padding-top: 20px;
            width: 74px;
            height: 298px;
            background-image: url('image/btn.png');
            text-align: center;
            word-spacing: 20px;
        }

        .btns table tr td div font {
            font-family: 'Microsoft YaHei ';
            font-size: 20px;
            height: 265px;
            writing-mode: vertical-lr;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            color: #b78b42;
            letter-spacing: 10px;
        }
    </style>
    <script>
        function playColumn(action) {
            var elementId;
            var move;
            if (action === "left") {
                move = -620;
            } else {
                move = 620;
            }
            var element = $("#table");
            var natve = parseInt(element.css("left"));
            var animateMove = natve + move;
            console.log("natve", natve)
            console.log("move", move)
            console.log("animateMove", animateMove)
            var max = $(".btns table tr td").length;
            var maxpage = Math.floor(max / 7);
            console.log("maxpage", maxpage)
            animateMove = animateMove > 0 ? 0 : animateMove;
            var minMove = -(maxpage * 620)
            console.log("minMove", minMove)
            animateMove = animateMove < minMove ? minMove : animateMove;
            console.log("animateMove", animateMove)
            element.stop(true, true)
            element.animate({left: animateMove}, 1000);
        }
        $(document).ready(function () {
            console.log("load")
            $.get("api/video/getPlayVideo", function (res) {
                res.videoUrl = res.videoUrl.replace(/\//, "")
                $("#video").attr("src", res.videoUrl)

            })
            $.get("api/ExternalLink/getExternalLinkByMetaId?metaId=ROOT", function (res) {
                console.log(res)
                if (res.content) {
                    var tr = $("#table-tr")
                    res.content.forEach(function (l) {
                        tr.append("<td><a href='"+l.targetUrl+"'><div><font>"+l.resourcesName+"</font></div></a></td>")
                    });
                }

            })
        })
    </script>
</head>


<body>
<div class="main">
    <div class="left-bar">
        <div onclick="playColumn('right')" class="mybtn mybtn-left" id="mybtn-left"></div>
        <div class="btns clearfix">
            <table id="table" style="position: relative;left: 0;">
                <tr id="table-tr">
                </tr>
            </table>
        </div>
        <div onclick="playColumn('left')" class="mybtn mybtn-right"></div>
    </div>
    <div class="video">
        <video id="video" src="image/test.mp4" autoplay loop></video>
    </div>
</div>
</body>
</html>